<template>
	<view class="">
		<view style="height: 100%;">
			 <view class="skeleton-rect">
		     	<calendarSwiper v-if="busLineInfo" @handlerCalendar="handlerCalendarTap" @handlerAllCalendar="handlerAllCalendar" :dptDate="dptDate" :saleDate="preSaleDate"></calendarSwiper>
			
				 <!-- <calendar-swiper v-if="busLineInfo" @handlerCalendar="handlerCalendarTap" @handlerAllCalendar="handlerAllCalendar" :dptDate="dptDate" :saleDate="preSaleDate"></calendar-swiper> -->
			 </view>
			 
			<scroll-view  v-if="regularList&&regularList.length&&!isLoadingData"  bindscrolltolower="lower" class="scroll-wrap" lowerThreshold="150" :scrollTop="scrollTop" :scroll-y="true" :style="'height:'+scrollHeight+'px'" upperThreshold="50">
				<view @click="toRegularDetail(item)" v-for="(item, index) in regularList" :key="index" class="row-center regular-item" :style="item.isSell==1?'':'color: #c8c8c8 !important;'">
					<view  class="dp-time display-flex-column">
						<view class="row-center">
							<view class="display-flex-column">
								<text  v-if="item.planType==3&&!item.isMust"  style="font-size: 10px;color: #959595;font-weight: 400;">预约满{{item.lowestNum}}人发车</text>
								<text  v-if="item.planType==3&&item.isMust"  style="font-size: 10px;color: #ff5500;font-weight: 400;">已拼车成功</text>
								
								<text>{{item.dpTime}}</text>
							</view>
							<view v-if="item.planType==2" style="font-size: 14px;color: #959595;font-weight: 400;margin-left: 2px;">前乘车</view>
						</view>

						<view v-if="item.planType==2" style="color: #007AFF;margin-top: 2px;padding: 0 4px;height: 20px;border: 1px solid #4297ff;border-radius: 3px;line-height: 20px;font-size: 10px;font-weight: 400;">
							滚动发车<text style="margin: 0 1px;">></text>
						</view>
						<view v-if="item.planType==3" style="margin-top: 2px;padding: 0 4px;height: 20px;border: 1px solid #4297ff;border-radius: 3px;line-height: 20px;color: #007AFF;font-size: 10px;font-weight: 400;">
							预约班<text style="margin: 0 1px;">></text>
						</view>
					</view>
					<view class="display-flex-column">
						<view class="row-center" style="margin: 5px 0 ;">
							<view class="dot_grey"></view>
							<view class="">
							    {{item.origin}}
							</view>
						</view>
						<view class="shu-line" style="margin: 0 37rpx;">
							
						</view>
						<view class="row-center">
							<view class="dot_grey"></view>
							<view class="">
							     {{item.destination}}
							</view>
						</view>
						<view class="row-center" style="color: #c8c8c8;font-size: 12px;">
				            <text class="iconfont icon-qichebanci" style="margin: 5px 14px;font-size: 10px;" ></text>
							<view class="">
							     {{item.companyName}}
							</view>
						</view>
					</view>
				    <view class="display-flex-column"  style="margin-left: auto;margin-right: 15px;">
				    	<view class="" style="color: #fd5905;">
				    		￥<text> {{item.price}}</text>
				    	</view>
						<text style="font-size: 14px;">余票 {{item.stock}}</text>
				    </view> 
				</view>
				<view class="" style="text-align: center;margin: 10px;">
					共找到{{regularList.length}}条结果
				</view>
			</scroll-view>
			<view v-else-if="isLoadingData" class="display-flex-align-center" style="text-align: center;margin-top: 300px;">
				<image style="width: 50px;height: 50px;" src="../../../static/images/bus/loading.gif" ></image>
			</view>
			<view v-else class="display-flex-align-center" style="text-align: center;margin-top: 300px;">
				当前线路暂无排班
			</view>
		</view>
		
		<apopup  :show="calendarShow" height="900" @close="calendarShow=false"  border-radius="20">
			<!-- <wCalendar v-if="startDate&&endDate"  :is-show="true" @callback="dateChange" > 
			</wCalendar> -->
			<calendar :salesDates="calendarDates"  @callback="dateChange" >
			</calendar>

		</apopup>

	</view>
</template>

<script>

	import apopup from '@/components/a-popup/index'
	import calendar from '@/components/calendar/index'
	
	import { preOrderBusApi } from "@/api/order"
	
	import { getPlanDates,getLineDatePlan } from "@/api/bus"
	import calendarSwiper from "@/components/calendar_swiper/index.vue"
	var util = require('@/common/js/util.js');
	var _getDiffDate = util.getDiffDate;
	var _addDay = util.addDay;
	var _dateDiff = util.dateDiff;
	var _parseDate = util.parseDate;
	var _formatDate = util.formatDate
	export default {
		components:{ apopup, calendar,calendarSwiper},
		data() {
			return {
				startDate:'',
				endDate:'',
			
				lineId: '',
				dptDate: '',
				preSaleDate: '',
				saleDays: 5,
			    disablePrev: false,
				disableNext: false,
				selectDayBean:'',
				info: {
					lunar: true,
					range: true,
					insert: true,
					selected: []
				},
				calendarShow: false,
				busLineInfo:'',
				calendarDates:'',
				scrollTop:0,
				scrollHeight: '',
				winHeight:'',
				regularList:[],
				isLoadingData:true,
	
			}
		},
	
		
		onLoad(option) {	
			this.lineId = option.line_id
			this.setInitDate(option)
			
		},
		onReady() {
		
		},
		methods:{
		    setInitDate: function(t) {
				
			    
				
				var that = this
				uni.showLoading({
				    title: '加载中...'
				});
				getPlanDates({line_id:t.line_id}).then(res => {
					uni.hideLoading()
					that.busLineInfo = res.data.busLine
					that.calendarDates = res.data.calendarDates
					that.startDate = res.data.firstDate?res.data.firstDate:''
					that.endDate = res.data.endDate?res.data.endDate:''
					that.dptDate = res.data.firstDate ? res.data.firstDate : _formatDate("yyyy-MM-dd")
					that.preSaleDate = _addDay(that.busLineInfo.yuSaleNum).day
					that.getRegularList(that.dptDate)
					uni.setNavigationBarTitle({
					　　title:that.busLineInfo.lineSn
					})
					
					this.info.selected = [];
					
					// 设置日期与价格
					for (var i = 0; i < that.calendarDates.length; i++) {
						this.info.selected.push({
							date:that.calendarDates[i].date_str,
							info: '￥' + that.calendarDates[i].price,
							surplus: 0
						})
					}
												
				
				})
				
			},
			
			
			setScrollHeight: function() {
				var t = this;
				uni.getSystemInfo({
					success: function(e) {
						var a = e.windowWidth - 30, i = 18 * Math.ceil(520 / a);
						t.winHeight = e.windowHeight,
						t.scrollHeight = (e.windowHeight -50 - i)
						console.log(t.scrollHeight)
					}
				});
			},
			/**获取班次列表*/
			getRegularList:function(date){
				let that = this
				that.regularList = []
				that.scrollHeight = ''
				that.isLoadingData = true
				this.setScrollHeight()
				getLineDatePlan({line_id:that.lineId,date:date}).then(res => {
					that.regularList = res.data	
					that.isLoadingData = false
				})
			},
			
			handlerCalendarTap:function(t){
				this.dptDate = t.currentDate
				this.getRegularList(this.dptDate)
		
			},
			/**日历选择*/
			dateChange:function(date){
				this.selectDayCalendar(date.startStr)
				this.calendarShow =false
				
			},
			handlerAllCalendar:function(){
				this.calendarShow = true
			},
			selectDayCalendar:function(date){
				this.dptDate = date.dateStr
				this.getRegularList(this.dptDate)
				
				let that = this
				that.calendarDates.forEach(function(res,index){
					res.selected = false
					if(res.dateStr == date.dateStr){
						res.selected = true
						that.isSelected = true
						that.selectDayBean = res.dateStr
					}
				})
			},
			/**跳转班次详情*/
			toRegularDetail:function(item){
				// console.log(item)
				
				if(item.isSell==0){
					uni.showModal({
					    title: '温馨提示',
					    content: '该班次已过最后购买时间！请选择其他班次进行购买',
						showCancel: false,
						confirmText: '我已知晓',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				} else{
					uni.showLoading({
						title:"请稍后"
					})
					preOrderBusApi({
						"planId": item.planId,
						"lineId": item.lineId,
					}).then(res => {
						// uni.navigateTo({
						// 	url: '/pages/users/order_confirm/index?preOrderNo=' + res.data.preOrderNo
						// });
						uni.hideLoading()
						uni.navigateTo({
							url:"/pages/bus/regular_detail/index?line_id="+item.lineId+
							'&preOrderNo='+ res.data.preOrderNo+
							'&plan_id='+item.planId+
							'&line_sn='+this.busLineInfo.lineSn+
							'&origin='+this.busLineInfo.origin+
							'&destination='+this.busLineInfo.destination+
							'&dp_time='+item.dpTime+
							'&date='+this.dptDate+
							'&plan_type='+item.planType
						})
						
					}).catch(err => {
						uni.hideLoading()
						return this.$util.Tips({
							title: err
						});
					})
				}
				
				
			}
		}
		
	}
</script>

<style>
	page{
		background-color: #f4f3fa;
	}
	.regular-item{
		margin-bottom: 5px;
		/* height: 80px; */
		background-color: #FFFFFF;
	}
	.dp-time{
		font-size: 40rpx;
		font-weight: 700;
		color: #000000;
		width: 100px;
		align-items: center;
		margin-left: 5px;
	}
</style>
